<template>
  <div class="upload-file">
    <el-upload
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :multiple="true"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
      :headers="headers"
      class="upload-file-uploader"
      ref="upload"
      :limit="limit"
    >
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
        <template v-if="fileSize">
          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
        </template>
        <template v-if="fileType">
          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
        </template>
        的文件
      </div>
    </el-upload>

    <!-- 文件列表 -->
    <transition-group
      class="upload-file-list el-upload-list el-upload-list--text"
      name="el-fade-in-linear"
      tag="ul"
    >
      <li
        :key="file.uid"
        class="el-upload-list__item ele-upload-list__item-content"
        v-for="(file, index) in list"
      >
        <div class="file-content">
          <div class="file-row">
            <div class="file-row-label">文件名称:</div>
            <div class="file-row-value">
              <div
                style="cursor: pointer;color: #409EFF;"
                href="#"
                @click="downLoadFile(file)"
                :underline="false"
                target="_blank"
                download
              >
                <!-- :href="formateUrl(file)" -->
                <span class="el-icon-document">
                  {{ getFileName(file.name || file.fileName) }}
                </span>
              </div>
            </div>
          </div>
          <div class="file-row">
            <div class="file-row-label">附件分类:</div>
            <div class="file-row-value">
              <el-select v-model="file.type">
                <el-option
                  v-for="type in typeList"
                  :key="type.id"
                  :label="type.type"
                  :value="type.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="file-row">
            <div class="file-row-label">大小:</div>
            <div class="file-row-value">
              {{ handleSizeToBytes(file.size) }}
            </div>
          </div>
          <div class="file-row">
            <div class="file-row-label">描述:</div>
            <div class="file-row-value">
              <el-input
                type="textarea"
                style="width: 220px"
                v-model="file.fileDesc"
                placeholder="描述"
              ></el-input>
            </div>
          </div>
          <!-- <div class="file-row">
            <div class="file-row-label">日期:</div>
            <div class="file-row-value">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="file.fileDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div> -->
        </div>
        <div v-if="aid" class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="save(index)" type="danger"
            >保存</el-link
          >
        </div>
        <div v-if="aid" class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger"
            >删除</el-link
          >
        </div>
      </li>
    </transition-group>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { handleSizeToBytes, isHttp } from "@/utils/ruoyi";
import { listType } from "@/api/weixinsys/type";
import {
  addAttachment,
  updateAttachment,
  delAttachment,
} from "@/api/weixinsys/attachment";

export default {
  props: {
    aid: {
      type: String | Number,
      default: "",
    },
    limit: {
      type: Number,
      default: 1,
    },
    // 值
    value: [String, Object, Array],
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 1000,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => [
        "doc",
        "xls",
        "ppt",
        "txt",
        "pdf",
        "zip",
        "png",
        "jpg",
        "jepg",
        "7z",
      ],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
      host: process.env.VUE_APP_IMG_HOST,
      typeList: [],
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
    // 列表
    list() {
      let temp = 1;
      if (this.value && this.value.length) {
        // 首先将值转为数组
        const list = Array.isArray(this.value) ? this.value : [this.value];
        // 然后将数组转为对象数组
        return list.map((item) => {
          if (typeof item === "string") {
            item = { name: item, url: item };
          }
          item.uid = item.uid || new Date().getTime() + temp++;
          return item;
        });
      } else {
        this.fileList = [];
        return [];
      }
    },
  },
  methods: {
    downLoadFile(file) {
      const url = this.formateUrl(file);
      console.log(url)
      window.open(url);
    },
    formateUrl(file) {
      if (!file.url) {
        return isHttp(file.fileUrl) ? file.fileUrl : this.host + file.fileUrl;
      }
      return host + file.url;
    },
    save(index) {
      // if(!this.aid){
      //   return;
      // }

      const item = this.fileList[index];
      if (item.id) {
        updateAttachment({
          id: item.id,
          fileName: item.name || item.fileName,
          fileUrl: item.url || item.fileUrl,
          fileType: item.fileType,
          fileDesc: item.fileDesc,
          size: item.size,
          type: item.type,
          productId: this.aid,
        }).then((res) => {
          this.$message.success("保存成功");
        });
      } else {
        addAttachment({
          fileName: item.name || item.fileName,
          fileUrl: item.url || item.fileUrl,
          fileType: item.fileType,
          fileDesc: item.fileDesc,
          size: item.size,
          type: item.type,
          productId: this.aid,
        }).then((res) => {
          this.$emit("success");
          this.$message.success("保存成功");
        });
      }
    },
    del() {},
    handleSizeToBytes,
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`只允许上传单个文件`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error("上传失败, 请重试");
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$message.success("上传成功,请保存");
      console.log(res, file);
      this.fileList.push({
        name: file.name,
        url: res.data.fileName,
        size: file.size,
        fileDesc: "",
        fileDate: new Date(),
        fileType: file.raw.type,
        fileName: file.name,
        fileUrl: res.data.fileName,
      });
      this.$emit("input", this.fileList);
    },
    // 删除文件
    handleDelete(index) {
      delAttachment(this.fileList[index].id).then((res) => {
        this.fileList.splice(index, 1);
        this.$emit("input", this.fileList);
        this.$message.success("删除成功");
      });
    },
    // 获取文件名称
    getFileName(name) {
      if (name && name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return name;
      }
    },
  },
  created() {
    this.fileList = this.list;
    if (this.aid) {
      this.getDicts("wx_fujian_type").then((res) => {
        this.typeList = res.data.map((x) => {
          return {
            type: x.dictLabel,
            id: Number(x.dictValue),
          };
        });
      });
    } else {
      listType({ pageSize: 99, pageNum: 1 }).then((res) => {
        this.typeList = res.rows;
      });
    }
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
  padding: 20px;
  width: 500px;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}

.file-content {
  flex: 1;
  .file-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .file-row-label {
      width: 5em;
    }
    .file-row-value {
      flex: 1;
    }
  }
}
</style>
